<template>
  <div>
    <el-form :inline="true" :model="data" size="small" label-width="100px">
      <div class="avatar-container">
        <el-tooltip effect="dark" placement="right" style="float: left">
          <div slot="content">点击修改头像<br>图片大小不超过1MB</div>
          <el-upload
            action="#"
            :auto-upload="false"
            :show-file-list="false"
            :file-list="fileList"
            accept=".png, .jpg, .jpeg"
            :limit="1"
            :on-change="selectAvatar"
          >
            <el-avatar :size="100" :src="avatar" fit="cover">
            </el-avatar>
          </el-upload>
        </el-tooltip>
        <div class="avatar-right">
          <div>
            <el-form-item label="教师名称：" prop="name">
              <el-input v-model="data.name" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item v-if="data.status!=null" v-model="data.status" label="审核状态：" prop="status">
              <el-tag v-if="data.status===0" type="success" size="small">正常</el-tag>
              <el-tag v-if="data.status===1" type="danger" size="small">未通过</el-tag>
              <el-tag v-if="data.status===2" type="warning" size="small">待审核</el-tag>
            </el-form-item>
            <el-form-item v-else></el-form-item>
          </div>
          <el-form-item label="手机号：" prop="mobile">
            <el-input v-model="data.mobile" placeholder="请输入昵称" />
          </el-form-item>
          <el-form-item label="邮箱地址：" prop="email">
            <el-input v-model="data.email" placeholder="请输入邮箱" />
          </el-form-item>
        </div>
      </div>
    </el-form>
    <el-form :model="data" size="mini" label-width="100px">
      <el-form-item label="教师简介：" prop="intro" class="block">
        <el-input
          v-model="data.intro"
          :rows="7"
          type="textarea"
          maxlength="1023"
          show-word-limit
          placeholder="为该教师添加简介"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "teacher_add_update",
  data() {
    return {
      data: {
        id: 0,
        avatar:'',
        name: '',
        mobile: '',
        email: '',
        intro: '',
        status:null,
        resumeFile: null
      },
      fileList:[],
      avatar:''
    }
  },
  methods: {
    setData(data) {
      let jwtToken = localStorage.getItem('jwtToken');
      axios.get('/api/teacher/queryTeacherById',
        {
          params:{
            id:data.id
          },
          headers:{jwtToken:jwtToken}
        }).then(result =>{
        if(result.data.code === 200){
          this.data = result.data.data;
          this.avatar = '../'+this.data.avatar
        }
      }).catch(e => {
        this.$message({
          showClose: true,
          message: '服务器去火星了!',
          type: 'error',
          duration: 2000
        });
      })
    },
    getData() {
      return this.data;
    },
    selectAvatar(file,fileList) {
      let jwtToken = localStorage.getItem('jwtToken')
      let fd = new FormData()
      fd.append('file', file.raw) //传给后台接收的名字 file
      axios.post('/api/upload/image', fd,
        {headers: {'Content-Type': 'multipart/form-data',jwtToken:jwtToken}})
        .then(result => {
          console.log(result)
          //上传成功后返回的数据,
          console.log("上传图片到:"+result.data);
          // 将图片地址给到表单
          this.data.avatar=result.data
          this.avatar = '../'+this.data.avatar
        })
    },
  }
}
</script>

<style scoped lang="scss">
.block {
  display: block;
}

.inliblock {
  display: inline-block;
}

.avatar-container {
  position: relative;
  min-height: 120px;

  .avatar-right {
    position: absolute;
    top: 0;
    left: 120px;
  }
}
</style>
